import styles from './index.module.scss'
import ArticleList from './components/ArticleList'
import Channel from './components/Channel'
import ArticleMark from './components/ArticleMark'
import { useAppSelector } from '@/store'

export default function Home() {
  const { list, activeId } = useAppSelector((state) => state.channel)
  return (
    <div className={styles.root}>
      {/* 首页频道组件 */}
      <Channel />
      {/* 首页新闻列表组件 */}
      {list.map((item) => (
        <div key={item.id} className='channel-list' hidden={activeId !== item.id}>
          <ArticleList channel_id={item.id} />
        </div>
      ))}
      {/* 标记文章的组件 - 不感兴趣 举报 */}
      <ArticleMark />
    </div>
  )
}
